var watermark = function () {
  if(!document.getElementById('secondCanvas')){//每次页面刷新会重复加载，所以进行判断下，避免加载多个canvas进行叠加
    var fisrst = document.createElement('canvas')//一张图片
    var second = document.createElement('canvas')//平铺的图片
    fisrst.width = 230
    fisrst.height = 230
    fisrst.id = 'firstCanvas'
    fisrst.style.display ='none'
    second.id = 'secondCanvas'
    second.style.pointerEvents = 'none'
    second.style.margin = '60px 0px 0px 212px'
    second.style.opacity = 0.2
    var imgObj = document.createElement('img')
    imgObj.src= './static/water3.png' // 水印图片
    console.log(document.documentElement.clientWidth)
    imgObj.onload = function () {
      var canvasFirst,canvasSecond,ctxFirst,ctxSecond
      canvasFirst = document.getElementById('firstCanvas')
      canvasSecond = document.getElementById('secondCanvas')
      ctxFirst = canvasFirst.getContext('2d')
      ctxSecond = canvasSecond.getContext('2d')

      ctxFirst.drawImage(imgObj,0,0,150,60);//把图片绘制到画布上
      // canvasSecond.width = document.documentElement.clientWidth;//获取可视宽度
      // canvasSecond.height = document.documentElement.clientHeight;
      canvasSecond.width = 3000//获取可视宽度
      canvasSecond.height = 3000;
      ctxSecond.clearRect(0,0,canvasSecond.width,canvasSecond.height);//清画布
      var pat = ctxSecond.createPattern(canvasFirst, "repeat");//在指定的方向上重复指定的元素
      ctxSecond.globalAlpha = 0.15;//透明度
      ctxSecond.rotate(340*Math.PI/180);//旋转
      ctxSecond.fillStyle = pat;
      ctxSecond.fillRect(0,0, canvasSecond.width, canvasSecond.height);//绘制填充
    }
    document.body.appendChild(fisrst);
    document.body.appendChild(second);
  }
}
export default watermark
